<template>
	<view>
		<form @submit="formSubmit">
			<input type="text" password class="uni-input" placeholder="输入旧密码" v-model="oldPassword" />
			<input type="text" password class="uni-input" placeholder="输入新密码" name="pwd" v-model="newPassword" />
			<input type="text" password class="uni-input" placeholder="确认输入密码" name="pwd2" v-model="confirmPassword" />
			<button type="primary" :loading="loading" formType="submit" :class="{ 'button-disable': disable }">完成</button>
		</form>
	</view>
</template>

<script>
var graceChecker = require('../../graceUI/jsTools/graceChecker.js');
export default {
	data() {
		return {
			loading: false,
			oldPassword: '',
			newPassword: '',
			confirmPassword: ''
		};
	},
	computed: {
		disable() {
			return !this.oldPassword || !this.newPassword || !this.confirmPassword;
		}
	},
	methods: {
		formSubmit(e) {
			if (this.loading) {
				return;
			}
			//定义表单规则
			var rule = [
				{ name: 'pwd', checkType: 'string', checkRule: '6,', errorMsg: '新密码至少6个字符' },
				{ name: 'pwd2', checkType: 'samewith', checkRule: 'pwd', errorMsg: '两次密码输入不一致' }
			];
			//进行表单检查 e.detail.value 内存放着表单数据
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			if (checkRes) {
				this.loading = true;
				setTimeout(() => {
					this.loading = false;
				}, 2000);
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
			}
		}
	}
};
</script>

<style lang="stylus">
button
	width 90%
	margin 30rpx auto
	color #333333 !important
	background #FFE934 !important
.button-disable
	background #F4F4F4 !important
	color #999999 !important
.uni-input
	border-bottom 1rpx solid #EEEEEE
	height 60rpx
	padding 15rpx 25rpx
	line-height 60rpx
	font-size 32rpx
	background #FFFFFF
</style>
